<template>
  <div class="container">
    <div class="search-box">
      <el-form
        :model="search"
        label-width="80px"
        style="align-items: center"
      >
        <el-row :gutter="24">
          <el-col :span="6">
              <el-input v-model="search.likeWords" placeholder="请输入" clearable size="small" class="ml20 mt6">
                <el-select v-model="search.QueryDataBaseFiled" slot="prepend" placeholder="请选择">
                  <el-option label="生产单号" value="ProduceTaskBillNo"></el-option>
                  <el-option label="协议书号" value="XieYiShuHao"></el-option>
                </el-select>
              </el-input>
          </el-col>
          <el-col :span="4">
            <el-form-item label="排序">
              <el-select
                v-model="search.orderBy"
                size="small"
                style="width: 100%"
                placeholder="请选择"
                @change="getAllMaterils"
              >
                <el-option label="协议书号" :value="0"> </el-option>
                <el-option label="机台名称" :value="1"> </el-option>
                <el-option label="工艺名称" :value="2"> </el-option>
                <el-option label="生产单号" :value="3"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-select
                v-model="search.orderBy2"
                size="small"
                style="width: 100%;margin-top:4px"
                placeholder="请选择"
                @change="getAllMaterils"
              >
                <el-option label="工序" :value="0"> </el-option>
                <el-option label="打印长度" :value="1"> </el-option>
                <el-option label="色数" :value="2"> </el-option>
              </el-select>
            
          </el-col>
          <el-col :span="6">
            <el-form-item label="日期范围">
              <el-date-picker
                v-model="valueDate"
                style="width: 100%"
                size="small"
                type="daterange"
                range-separator="-"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleDateChange"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="生产状态">
              <el-select
                v-model="search.TaskProduceState"
                size="small"
                style="width: 100%"
                placeholder="请选择"
                @change="getAllMaterils"
              >
                <el-option label="全部" :value="-1"> </el-option>
                <el-option label="待生产" :value="0"> </el-option>
                <el-option label="生产中" :value="1"> </el-option>
                <el-option label="待停工" :value="2"> </el-option>
                <el-option label="已停工" :value="3"> </el-option>
                <el-option label="已完成" :value="4"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
          <div class="flex flex_center mt8">
            <el-button
              type="primary"
              size="small"
              class="ml30"
              icon="el-icon-search"
              :loading="searchLoading"
              @click="handleSearch"
              >搜索</el-button
            >
            <el-button size="small" icon="el-icon-download" @click="handleDownloadExcel">导出excel</el-button>
          </div>
        <!-- <el-button size="small" icon="el-icon-download" :loading="downLoading" @click="downloadFile">导出数据</el-button> -->
      </el-form>
    </div>
    <div class="d_main flex1">
      <!-- 操作区 S-->
      <!-- 操作区 E-->
      <!-- 表格操作区 S-->
      <div class="d_tableOperation">
        <div class="d_condition"></div>
        <div class="d_set">
          <!-- <el-checkbox v-model="search.IsCompleted" :true-label="1" :false-label="-1" @change="getAllMaterils">仅看已完成</el-checkbox> -->
          <div @click="Refresh"><i class="d_icon el-icon-refresh-right" /></div>
          <div class="setting flex">
            <HeadSeting
              :list-data.sync="tableHead"
              :table-code="$config.outstockreportlist"
              @reset="getTableHead"
            />
          </div>
        </div>
      </div>
      <!-- 表格操作区 E-->
      <!--table板块-->
      <div ref="tableCon" class="tableCon expandBox">
        <el-table
          v-show="tableHead.length > 0"
          id="tableId"
          ref="multipleTable"
          v-loading="searchLoading"
          :data="allMaterirls"
          :height="tableHeight || 'auto'"
          @sort-change="handleTableSort"
          border
          fit
          style="width: 100%"
          @header-dragend="surverWidth"
        >
          <template v-for="(fruit, index) in tableHead">
            <el-table-column
              v-if="fruit.visible"
              :key="index"
              :label="fruit.columnName"
              :min-width="fruit.columnWidth || 90"
              :prop="fruit.columnCode"
              show-overflow-tooltip
              :fixed="fruit.isFloat ? 'left' : false"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="fruit.columnCode === 'getMaterialBillNo'"
                  type="text"
                  @click="checkProductList(scope.row)"
                >
                  {{ scope.row[fruit.columnCode] }}</el-button
                >
                <div
                  v-else-if="fruit.columnCode === 'getMaterialBillStateName'"
                  class="flex"
                ></div>
                <template v-else>
                  {{ scope.row[fruit.columnCode] }}
                </template>
              </template></el-table-column
            >
          </template>
        </el-table>
        <!-- 骨架屏     -->
        <div v-if="tableHead.length == 0" class="p16">
          <el-skeleton :rows="6" animated />
        </div>
      </div>
      <!-- 分页 S-->
      <div class="d_pag">
        <pagination
          :total="total || 0"
          :page.sync="search.pageIndex"
          :limit.sync="search.pageSize"
          @pagination="getAllMaterils"
        />
      </div>
    </div>
  </div>
</template>
  <script>
import { arraySort } from "@/utils";
import HeadSeting from "@/components/HeadSeting";
import Pagination from "@/components/Pagination";
import { mapGetters } from "vuex";
import { fileExport } from "@/utils/index";
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  name: "outWarehouse",
  components: {
    Pagination,
    HeadSeting,
  },
  data() {
    return {
      checked:false,
      supplierList: [], //供应商下拉数据
      materialList: [], //物料下拉数据
      stockGoodsList: [], //基础物料下拉数据
      inStockTypeList: [], //物料入库类型下拉数据
      searchLoading: false, //表格加载层
      downLoading: false, //下载文件按钮加载层
      valueDate: "",
      allMaterirls: [],
      tableHeight: null,
      query: {
        groupCode: "", //分组代码，空值查询全部
        categoryCode: "", //	分类代码，空值查询全部
        supplierCode: "", //供应商代码，空值查询全部
        goodsCode: "", //基础物料代码，空值查询全部
        likeWords: "", //查询关键字，空值查询全部
        
      },
      // 搜索条件
      search: {
        pageIndex: 1,
        pageSize: 30,
        likeWords: "",
        isShowDisabled: 0,
        beginTime: "", //入库日期范围-开始时间
        endTime: "", //	入库日期范围-结束时间
        IsCompleted: -1, //查询关键字，空值查询全部
        TaskProduceState:0,
        QueryDataBaseFiled:"XieYiShuHao",
        orderBy: 3,
        orderBy2:0,
      },
      total: 0, // 总条数
      tableHead: [], // 表格表头
    };
  },
  computed: {
    ...mapGetters(["name", "userInfo"]),
  },
  created() {
    //  所有列表数据
    this.getAllMaterils();
    // 表格得表头
    this.getTableHead();
  },
  mounted() {
    // 表格高度
    this.calHeight();
    console.log(this.ProductForm);
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.multipleTable.doLayout();
    });
  },
  methods: {
    //日期范围选择事件
    handleDateChange() {
      if (this.valueDate) {
        this.search.beginTime = this.valueDate[0];
        this.search.endTime = this.valueDate[1];
      } else {
        this.search.beginTime = "";
        this.search.endTime = "";
      }
    },

    //导出excel
  handleDownloadExcel() {
      var xlsxParam = { raw: true };
      var fileName = `${this.$route.meta.title}.xlsx`
      // let tables = document.querySelector('#tableId').cloneNode(true) // 重点
      // let fixed  = tables.querySelector(".el-table__fixed")
      // tables.removeChild(fixed) // 重点
      var wb = XLSX.utils.table_to_book(
        document.querySelector("#tableId"),
        xlsxParam
      );

      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: "application/octet-stream" }),
          //设置导出文件名称
          fileName
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

    //排序
    handleTableSort() {},

    //导出数据
    downloadFile() {
      this.downLoading = true;
      this.$api.report
        .ExportOutStockReportsDataToExcel(this.search)
        .then((res) => {
          fileExport(res, "物料出库导出数据", "xlsx");
          this.downLoading = false;
        });
    },

    // 保存表头样式变化
    saveHead(newArray) {
      const parmas = newArray;
      setTimeout(() => {
        this.$api.common.saveTableStyle(parmas).then(() => {});
      }, 300);
    },
    // 保存表头列宽度
    surverWidth(newWidth, oldWidth, column) {
      setTimeout(() => {
        const heads = [...this.tableHead];
        heads.forEach((item) => {
          if (item.columnCode === column.property) {
            item.columnWidth = column.width;
            return;
          }
        });
        this.saveHead(heads);
      }, 100);
    },
    // 表格最大高度
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.tableCon.getBoundingClientRect();
        console.log(rect.height);
        this.tableHeight = rect.height;
      });
    },
    // ，清除所有查询条件
    Refresh() {
      this.search = this.$options.data().search;
      this.getAllMaterils();
    },
    // 获取表格表头
    getTableHead() {
      const parmas = {
        tableCode: this.$config.productionCraftTaskReport,
      };
      this.$api.common.getAllTableHead(parmas).then((res) => {
        console.log(res);
        res.sort(arraySort("columnSort"));
        this.tableHead = res;
      });
    },

    //搜索
    handleSearch() {
      this.search.pageIndex = 1;
      this.getAllMaterils();
    },

    // 所有列表数据
    getAllMaterils() {
      const parmas = this.search;
      this.searchLoading = true;
      this.$api.report
        .PageQueryProductionCraftTaskReport(parmas)
        .then((res) => {
          setTimeout(() => {
            console.log(res);
          }, 2000);
          this.allMaterirls = res.list;
          // this.allMaterirls.forEach((item)=>{
          //   for(let i in item){
          //     if(!item[i] && item[i] !== 0){
          //       item[i] = '--'
          //     }
          //   }
          // })
          console.log(this.allMaterirls);
          this.total = res.totalCount;
          this.searchLoading = false;
        })
        .catch(() => {
          this.searchLoading = false;
        });
    },
  },
};
</script>
  <style lang="scss" scoped>
.search-box {
  padding: 14px 16px 0 0;
  margin-bottom: 10px;
  display: flex;
  height: 110px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #e6e6e6;
  .el-form-item {
    margin-bottom: 0 !important;
  }
}

.container {
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.permangeRg {
  border: 1px solid #e6e6e6;
  background: #fff;
  height: 100%;

  .mainTT {
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    padding: 18px 16px;
    padding-bottom: 0;
  }
}
.addWuliaoBox {
  padding: 10px 16px;

  .tableBox {
    margin-top: 16px;
    border: 1px solid #e6e6e6;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    overflow: hidden;

    .tt {
      height: 38px;
      line-height: 38px;
      padding-left: 16px;
      background: #f7f8fa;
      border-radius: 8px 8px 0 0;
    }
  }
}

::v-deep .el-input .el-input--suffix {
  .el-input__inner{
    width: 100px;
  }
}

.subTip {
  border-bottom: 1px #e6e6e6 solid;
  background: #f5f6f9;
  padding: 8px 16px;
}
</style>
  